<template>
  <div class="app-container">
    <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="线路">
        <el-select placeholder="请选择线路" v-model="lineNo">
          <el-option v-for="item in lineOptions" :key="item.key" :value="item.value" :label="item.key"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <LineCharts :line-no="lineNo" :param="param"/>
    <SleeperCanvas :line-no="lineNo" @changeTime="changeTimeValue"/>
  </div>
</template>

<script>
    import * as echarts from "echarts";
    import LineCharts from "./lineCharts";
    import SleeperCanvas from "./sleeperCanvas"

    export default {
        components: {LineCharts,SleeperCanvas},
        data() {
            return {
              lineNo:1,
              lineOptions: [
                {
                  key: "线路1",
                  value: 1
                },
                {
                  key: "线路2",
                  value: 2
                },
                {
                  key: "线路3",
                  value: 3
                },{
                  key: "线路4",
                  value:  4
                }
              ],
              param: {
                moveSign: 'add',
                moveNum: 90,
                startPixelNo: 0,
                endPixelNo: 18000
              }
            };
        },
        mounted() {
            //this.initChart();
            //this.handleQuery()
        },
        methods: {
          changeTimeValue(param){
            console.log('changgggggg',param)
            this.param = param
          }
        },
    };
</script>
